<!--数据统计界面-->

<template>
  <div class="statistics_container">
    <div class="upContainer">
      <el-row :gutter="10">
        <el-col span="12">
          <el-card>
            <div style="width: 100%; height: 200px" id="pieChart">
              左边展示当前数据概览——以用户为单位——已完成审批-待审批-催促-delay
            </div>
          </el-card>
        </el-col>
        <el-col span="12">
          <el-card>
            <div style="width: 100%; height: 200px" id="barChart">
              右边可以筛选数据，展示每个产品任务的：未认证、已完成认证待审批、delay
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="bottomContainer">
      <el-row>
        <el-card>
          <div style="width: 100%; height: 320px" id="lineChart">
            下面展示这一周任务时序图——需要认证、待审批、delay
          </div>

        </el-card>
      </el-row>
    </div>

  </div>

</template>

<script>
import request from "@/utils/request";

import * as echarts from 'echarts'

//折线图的数据
const option1 = {

  title:{
    text: '本周认证任务截止日期统计',
    left: 'center'
  },

  legend: {
    orient: 'vertical',
    left: 'left'
  },

  tooltip:{
    trigger: 'axis', //鼠标滑动触发
  },

  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [

    {
      name: 'delay',
      data: [280, 300, 190, 383, 229, 319, 330],
      type: 'line',
      smooth: true
    }
  ]
};

//柱状图的数据
const option2 = {

  title:{
    text: '当前用户认证任务统计',
    subtext: '以每个产品为单位',
    left: 'center'
  },
  //图示的格式
  legend:{
    orient: 'vertical',
    left: 'left'
  },

  grid: {
    left: '5%',   // 距离左侧的距离
    top: '40%',    // 距离顶部的距离
    // 其他属性根据需要调整
  },

  tooltip:{
    trigger: 'axis', //鼠标滑动触发
  },

  xAxis: {
    type: 'category',
    //产品名称
    data: ['CPU', '华为交换机', '路由器', '显示器', '小米平板']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '待认证',
      data: [20, 32, 21, 34, 49],
      type: 'bar',
      smooth: true
    },
    {
      name: '已认证待审批',
      data: [88, 12, 40, 34, 20],
      type: 'bar',
      smooth: true
    },

    {
      name: 'delay',
      data: [20, 30, 19, 33, 29, 39, 33],
      type: 'bar',
      smooth: true
    }
  ]
};

//饼图的数据
const option3 = {
  title: {
    text: '当前认证任务统计-我的',
    subtext: '',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '70%',
      center: ['50%','60%'],
      data: [
        { value: 18, name: '已完成审批' },
        { value: 5, name: '待审批' },
        { value: 8, name: '催促' },
        { value: 20, name: 'delay' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

export default {
  name: "Statistics",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '测试项目经理1'
      }, {
        value: '选项2',
        label: '测试项目经理2'
      }, {
        value: '选项3',
        label: '测试项目经理3'
      }, {
        value: '选项4',
        label: '测试项目经理4'
      }, {
        value: '选项5',
        label: '测试项目经理5'
      }],
      value: ''
    }
  },

  mounted() {
    //折线图
    let lineDom = document.getElementById("lineChart")
    let myLineChart = echarts.init(lineDom)
    myLineChart.setOption(option1)
    //柱状图
    let barDom = document.getElementById("barChart")
    let myBarChart = echarts.init(barDom)
    myBarChart.setOption(option2)
    //饼图
    let pieDom = document.getElementById("pieChart")
    let myPieChart = echarts.init(pieDom)
    myPieChart.setOption(option3)

  }

}
</script>

<style scoped>

.statistics_container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.upContainer {
  height: 45%;
}

.bottomContainer {
  flex: 1;
}


</style>